<!-- <form action="{% url 'polls:vote' question.id %}" method="post">
    {% csrf_token %}
    <fieldset>
        <legend><h1>{{ question.question_text }}</h1></legend>
        {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
        {% for choice in question.choice_set.all %}
            <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
            <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
        {% endfor %}
    </fieldset>
    <input type="submit" value="Vote">
    </form> -->


    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>投票详情</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            }
            
            body {
                background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 40px 20px;
                color: #333;
            }
            
            .container {
                max-width: 700px;
                width: 100%;
                background: white;
                border-radius: 16px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
                overflow: hidden;
                margin-top: 20px;
                animation: fadeIn 0.6s ease-out;
            }
            
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            header {
                background: linear-gradient(to right, #4b6cb7, #182848);
                color: white;
                padding: 30px 40px;
                text-align: center;
                position: relative;
                overflow: hidden;
            }
            
            header::before {
                content: "";
                position: absolute;
                top: -50%;
                left: -50%;
                width: 200%;
                height: 200%;
                background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
                transform: rotate(30deg);
            }
            
            h1 {
                font-size: 2.2rem;
                font-weight: 600;
                margin-bottom: 5px;
                position: relative;
                z-index: 2;
            }
            
            .question-info {
                display: flex;
                justify-content: center;
                gap: 20px;
                margin-top: 15px;
                font-size: 0.9rem;
                opacity: 0.85;
                position: relative;
                z-index: 2;
            }
            
            .content {
                padding: 40px;
            }
            
            .poll-form {
                margin-top: 10px;
            }
            
            .form-title {
                display: flex;
                align-items: center;
                margin-bottom: 25px;
                padding-bottom: 15px;
                border-bottom: 1px solid #f0f0f0;
            }
            
            .form-title i {
                font-size: 1.8rem;
                color: #4b6cb7;
                margin-right: 12px;
            }
            
            .form-title h2 {
                font-size: 1.5rem;
                color: #2c3e50;
            }
            
            .choices-container {
                margin: 25px 0;
            }
            
            .choice-item {
                display: flex;
                align-items: center;
                padding: 16px 20px;
                margin-bottom: 15px;
                background: #f9fbfd;
                border-radius: 12px;
                border: 1px solid #eaeaea;
                transition: all 0.3s ease;
                cursor: pointer;
            }
            
            .choice-item:hover {
                transform: translateX(5px);
                border-color: #4b6cb7;
                box-shadow: 0 5px 15px rgba(75, 108, 183, 0.1);
            }
            
            .choice-item.selected {
                background: #f0f5ff;
                border-color: #4b6cb7;
            }
            
            input[type="radio"] {
                display: none;
            }
            
            .custom-radio {
                display: inline-block;
                width: 22px;
                height: 22px;
                border: 2px solid #bdc3c7;
                border-radius: 50%;
                margin-right: 15px;
                position: relative;
                transition: all 0.2s ease;
            }
            
            .choice-item:hover .custom-radio {
                border-color: #4b6cb7;
            }
            
            input[type="radio"]:checked + .custom-radio {
                border-color: #4b6cb7;
                background: #4b6cb7;
            }
            
            input[type="radio"]:checked + .custom-radio::after {
                content: "";
                position: absolute;
                top: 4px;
                left: 4px;
                width: 10px;
                height: 10px;
                background: white;
                border-radius: 50%;
            }
            
            .choice-text {
                font-size: 1.1rem;
                color: #2c3e50;
                flex: 1;
            }
            
            .error-message {
                background: #ffebee;
                color: #c62828;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                animation: shake 0.5s;
            }
            
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                20%, 60% { transform: translateX(-5px); }
                40%, 80% { transform: translateX(5px); }
            }
            
            .error-message i {
                margin-right: 10px;
                font-size: 1.2rem;
            }
            
            .submit-btn {
                display: block;
                width: 100%;
                padding: 16px;
                background: linear-gradient(to right, #4b6cb7, #182848);
                color: white;
                border: none;
                border-radius: 12px;
                font-size: 1.1rem;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.3s ease;
                margin-top: 20px;
                box-shadow: 0 5px 15px rgba(75, 108, 183, 0.3);
            }
            
            .submit-btn:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(75, 108, 183, 0.4);
            }
            
            .submit-btn:active {
                transform: translateY(0);
            }
            
            .back-link {
                display: inline-block;
                margin-top: 25px;
                color: #4b6cb7;
                text-decoration: none;
                font-weight: 500;
                transition: all 0.2s ease;
            }
            
            .back-link:hover {
                color: #182848;
                transform: translateX(-3px);
            }
            
            .back-link i {
                margin-right: 8px;
                transition: all 0.2s ease;
            }
            
            .back-link:hover i {
                transform: translateX(-3px);
            }
            
            footer {
                text-align: center;
                padding: 25px;
                color: #7f8c8d;
                font-size: 0.9rem;
                border-top: 1px solid #eee;
                background: #f9fbfd;
            }
            
            @media (max-width: 600px) {
                .content {
                    padding: 25px 20px;
                }
                
                header {
                    padding: 25px 20px;
                }
                
                h1 {
                    font-size: 1.8rem;
                }
                
                .form-title h2 {
                    font-size: 1.3rem;
                }
                
                .choice-text {
                    font-size: 1rem;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>投票详情</h1>
                <div class="question-info">
                    <span><i class="fas fa-question-circle"></i> 问题详情</span>
                    <span><i class="fas fa-users"></i> 社区投票</span>
                </div>
            </header>
            
            <div class="content">
                <form action="{% url 'polls:vote' question.id %}" method="post" class="poll-form">
                    {% csrf_token %}
                    
                    <div class="form-title">
                        <i class="fas fa-edit"></i>
                        <h2>{{ question.question_text }}</h2>
                    </div>
                    
                    {% if error_message %}
                    <div class="error-message">
                        <i class="fas fa-exclamation-circle"></i>
                        <strong>{{ error_message }}</strong>
                    </div>
                    {% endif %}
                    
                    <div class="choices-container">
                        {% for choice in question.choice_set.all %}
                        <label class="choice-item" for="choice{{ forloop.counter }}">
                            <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
                            <span class="custom-radio"></span>
                            <span class="choice-text">{{ choice.choice_text }}</span>
                        </label>
                        {% endfor %}
                    </div>
                    
                    <button type="submit" class="submit-btn">
                        <i class="fas fa-paper-plane"></i> 提交投票
                    </button>
                </form>
                
                <a href="{% url 'polls:index' %}" class="back-link">
                    <i class="fas fa-arrow-left"></i> 返回问题列表
                </a>
            </div>
            
            <footer>
                <p>投票应用 &copy; 2023 - 每个选择都很重要</p>
            </footer>
        </div>
        
        <script>
            // 添加选择交互效果
            document.querySelectorAll('.choice-item').forEach(item => {
                item.addEventListener('click', function() {
                    // 移除之前的选择
                    document.querySelectorAll('.choice-item').forEach(el => {
                        el.classList.remove('selected');
                    });
                    
                    // 添加当前选择
                    this.classList.add('selected');
                    
                    // 选中对应的单选按钮
                    const radio = this.querySelector('input[type="radio"]');
                    radio.checked = true;
                });
            });
            
            // 错误消息动画
            const errorMessage = document.querySelector('.error-message');
            if (errorMessage) {
                setTimeout(() => {
                    errorMessage.style.opacity = '0.9';
                }, 500);
            }
        </script>
    </body>
    </html>